<template>
  <div>
    <ifButton type="primary" size="small" style="margin-bottom: 10px" @click="showToast"> 轻提示 </ifButton>
    <div v-bottomOut="{callback: bottomOutEvent, target: true, backOptions: backOptions}" style="height: 200px">
      <div style="height: 400px">
        触底回调事件
      </div>
    </div>
  </div>
</template>

<script>
export default {
  setup (props, $) {
    const backOptions = { page: 1, e: 123 }
    return { backOptions }
  },

  methods: {
    showToast: function () {
      this.$toast({
        text: '加载中',
        icon: 'circle-notch',
        fullscreen: true,
        iconAnimate: true
      })
    },

    bottomOutEvent: function (options) {
      const a = this.$toast({
        text: '到底了~',
        fullscreen: false,
        color: '#FFF',
        duration: 0,
        onClose: (e) => {
          console.log(e)
        }
      })

      setTimeout(() => {
        a.close()
      }, 1500)
    }
  }
}
</script>
